<template>
    <el-row :gutter="20">
        <el-col :span="16" :offset="5">
            <div id="userBox">
                <el-row>
                    <div id="userImg">
                        <img :src="picSrc+USERINFO.Head" alt="">
                    </div>
                </el-row>
                <el-row>
                    <p id="userName">{{USERINFO.UserName}}</p>
                </el-row>
                <div id="userType">
                    <div class="bar"></div>
                    <span>{{userType}}</span>
                </div>
                <div @click="closeKE" id="enterClassName">
                    <span>{{enterClass}}</span>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script type="text/ecmascript-6">

    import {mapGetters, mapActions} from 'vuex'

    export default {
        name: "userBox",
        computed: mapGetters([
            'picSrc',
            'userType',
            'enterClass',
            'USERINFO'
        ]),
        methods: {
            closeKE(){
                QuitApp()
            }
        },
        mounted(){

        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../assets/css/public.scss';

    #userBox {
        margin-top: 50px;
        width: 100%;
        box-shadow: $boxShadow;
        background: #fff;
        display: inline-block;
        border-radius: 5px;
        #userImg {
            overflow: hidden;
            margin: 20px auto;
            border: 5px solid #c9d0ec;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
        #userName {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            color: #444;
        }
        #userType {
            text-align: center;
            width: 80%;
            font-size: 16px;
            margin: 10px auto;
            position: relative;
            span {
                background: #fff;
                padding: 0 5px;
                height: 20px;
                line-height: 20px;
                position: relative;
                top: 0;
                color: #444;
            }
            .bar {
                width: 100%;
                height: 1px;
                background: #9eb9fd;
                top: 50%;
                position: relative;
                top: 0.5rem;
            }
        }
        #enterClassName {
            background: $themeColor;
            height: 110px;
            border-radius: 50% 50% 8px 8px;
            span {
                display: block;
                text-align: center;
                font-size: 18px;
                width: 80%;
                margin: 0 auto;
                background-image: linear-gradient(-180deg, #66f5c1 0%, #00ad6d 100%);
                height: 40px;
                line-height: 40px;
                position: relative;
                top: 50px;
                border-radius: 5px;
                color: #fff;
            }
        }
        @media screen and(min-width: 1200px) {
            #userImg {
                width: 80px;
                height: 80px;
            }
        }
        @media screen and(min-width: 1440px) {
            #userImg {
                width: 90px;
                height: 90px;
            }
        }
        @media screen and(min-width: 1920px) {
            #userImg {
                width: 110px;
                height: 110px;
            }
        }

    }
</style>